﻿/// <reference path="../../../scripts/typings/jqueryui/jqueryui.d.ts" />
/// <reference path="tracksettings.d.ts" />
import ko = require("knockout");
import $ = require("jquery");
import Track = require("Track");
import Classes = require("../../classes");
import Project = require("../../Project");
import Editor = require("../../Editor");
ko.bindingHandlers.heightResizable = {
    init: (element, valueAccessor, allBindings, viewModel, bindingContext) => {
        $(element).resizable({
            handles: { s: $(element).find('.resize-handle') },
            minHeight: 90,
            maxHeight: 500,
            resize: (event, ui) => {
                valueAccessor()(ui.size.height);
            }
        });
    },
    update: (element, valueAccessor, allBindings, viewModel, bindingContext) => {
        var val = ko.unwrap(valueAccessor());
        var $el = $(element);

        if (val != $el.outerHeight()) {
            $el.outerHeight(val);
        }
    }
};

class TrackSettingsVm {
    public constructor(params: { track: Track, editor: Editor }) {
        this.editor = params.editor;
        this.track = params.track;

        this.isAudioTrack = params.track.isAudioTrack;
        this.height = params.track.height;
        this.volume = params.track.volume;
        this.balance = params.track.balance;
        this.numChannels = params.track.numChannels;
        this.name = params.track.name;
        this.type = params.track.type;

        this.gotFocus = ko.pureComputed(() => this.editor.focusTrack() == this.track);
        this.cssClass = ko.pureComputed(() => (this.track.themeClass() + (this.gotFocus() ? " bd-fg2" : "")));
    }

    public onTap = (event, element) => {
        this.editor.focusTrack(this.track);
    }

    public height: KnockoutObservable<number>;
    public volume: KnockoutObservable<number>;
    isAudioTrack: boolean;
    numChannels: number;
    type: string;
    name: KnockoutObservable<string>;
    balance: KnockoutObservable<number>;
    track: Track;
    editor: Editor;

    public gotFocus: KnockoutComputed<boolean>;

    public cssClass: KnockoutComputed<string>;

}

export = TrackSettingsVm;